import React, { useState,useEffect } from 'react'
let requestApi=()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(['暴龙兽','亚古兽',"机械暴龙兽","战斗暴龙兽","E仔兽"])
        },10)
    })
}
function Effect(){
    console.log(22344)
    let [users,setUsers]=useState([])
    let [persinId,setPersonId]=useState([0])
    let [aa,setAa]=useState(0)
    //最开始的时候，进行网络请求
    //useEffect
    //如果没有第二个参数  根据第二个参数改变情况执行
    //返回值：是一个回调 只有组件卸载的时候 会执行
    //只有在初始化的时候执行
    useEffect(async()=>{
        let res=await requestApi()
        setUsers(res)
        return()=>{
            console.log("回调");
        }
    },[])

    useEffect(()=>{
        console.log("persinId的useEffect");
        return()=>{
            console.log("回调");
        }
    },[persinId])


    useEffect(()=>{
        console.log("aa的useEffect");
        return()=>{
            console.log("回调");
        }
    },[aa])
    return(
        <div>
        <h2>{persinId}{aa}</h2>
        {
            users.map(item=><div key={item}>{item}</div>)
        }
            <button onClick={()=>setPersonId([10])}>
                改变personId
            </button>
            <button onClick={()=>setAa([10])}>
                改变setAa
            </button>
        </div>
    )
}

function Parent(){
    let [count,setCount]=useState(0)
    return (
        <div>
            <button onClick={()=>setCount(count++)}>
                切换组件
            </button>
            {
                count%2===0?<Effect/>:<div>
                    我是备胎
                </div>
            }
        </div>
    )
}




export default Parent